import React from 'react';
import { Button, WhiteSpace, WingBlank, InputItem, Toast } from 'antd-mobile';
import { createForm } from 'rc-form';
import { connect } from 'dva';
import Container from '../components/Base/Container';
import _ from 'lodash';
import styles from './CouponPage.less';

class CouponUsePage extends React.Component {
  componentDidMount() {
    window.scrollTo(0, 0);
  }

  submit = () => {
    this.props.form.validateFields((error, value) => {
      if (error) {
        Toast.fail(_.map(error, (v) => {
          return _.get(v, 'errors[0].message');
        })[0], 1);
        return;
      }
      const result = _.pickBy(value, v => !_.isNil(v) && !_.isEmpty(v));
      this.props.search(result);
    });
  };

  render() {
    const { getFieldProps } = this.props.form;
    return (
      <Container title="电子优惠券-核销" className={styles.couponUsePage}>
        <div
          style={{
            textAlign: 'center',
            height: '100%',
            lineHeight: '100%',
            paddingTop: '35%',
          }}
        >
          <WingBlank>
            <InputItem
              className={styles.couponUseInput}
              {...getFieldProps('code', {
                rules: [{ required: true, message: '请输入优惠券码' }],
              })}
              type="text"
              placeholder="输入优惠券码"
            />
          </WingBlank>

          <WhiteSpace size="xl" />

          <WingBlank>
            <Button
              type="primary"
              onClick={this.submit}
            >查询</Button>
          </WingBlank>

        </div>
      </Container>
    );
  }
}

export default connect((state) => {
  return {
  };
}, (dispatch, props) => {
  return {
    search: (payload) => {
      dispatch({
        type: 'coupon/searchCouponCode',
        payload,
      });
    },
  };
})(createForm()(CouponUsePage));
